e.stopPropagation 阻止事件傳遞

阻止事件冒泡，你加在哪邊，事件的傳遞就斷在哪裡，不會繼續往下傳遞。

HTML:

<div class="outer">
  <div class="inner">
    <button class="btn">click me</button>
    </div>
</div>

JS:

addEvent('.outer')
addEvent('.inner')

             
function addEvent(className) {
    document.querySelector(className)
            .addEventListener('click',function(e) {
              console.log(className, '捕獲')
            }, true)
    document.querySelector(className)
            .addEventListener('click',function(e) {
              console.log(className, '冒泡')
            }, false)
}

document.querySelector('.btn')
                .addEventListener('click', function(e) {
                  e.stopPropagation() //這句是重點
                  console.log('.btn 目標')
              })      

* 當有 e.stopPropagation() 的時候，會 log 出：

僅有捕獲階段被 log 出來，代表到達目標（target phase）後沒有冒泡回去。

* 當沒有 e.stopPropagation() 的時候，會 log 出：

捕獲階段跟冒泡階段都有 log 出來。

e.stopImmediatePropagation 阻止任何 EventListener

如果當同樣元素被掛上兩個「事件監聽」，就會同時被掛上，但若只想要有一個「事件監聽」，就可以使用 stopImmediatePropagation，